<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<style type='text/css'>
*{margin:0px; padding:0px; list-style-type:none; text-decoration:none; font-family:"微软雅黑";}
div.main{width: 320px; height:320px; border:1px solid red; margin:30px auto 0px; overflow: hidden;}
</style>
</head>
<body>
<div class="main">
    <canvas id="myCanvas1" width="320px" height="320px">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas2" width="200px" height="200px">抱歉！浏览器不支持。</canvas>    
    <canvas id="myCanvas3" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas4" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
    <button id="tupBtn" class="turnplatw_btn"></button>
</div>
<script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript'>
// 找 canvas 元素
var myCanvas0 = document.getElementById("myCanvas1");
var myCanvas1 = document.getElementById("myCanvas2");
var myCanvas2 = document.getElementById("myCanvas3");
var myCanvas3 = document.getElementById("myCanvas4");
//创建 context 对象
var canvas0 = myCanvas0.getContext("2d");
var canvas1 = myCanvas0.getContext("2d");
var canvas2 = myCanvas0.getContext("2d");
var canvas3 = myCanvas0.getContext("2d");
//
var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
var info1 = ['再接再厉','      元','     元','  淘金币','     元','  淘金币','     元','  淘金币']
createCircle(8);
function createCircle(sum){
    // 画圆
    canvas0.beginPath();
    // arc(x,y,半径,弧度,顺时针false)
    // 弧度 = (度/180) * PI
    var startAngle = endAngle = "";
    // 分成8等分，每一个角是45度
    for(var i=0; i<sum; ++i){
        startAngle = ((i*(360/sum))/180)*Math.PI - (1/sum)*Math.PI; //开始弧度
        endAngle = startAngle + ((360/sum)/180)*Math.PI; //结束弧度
        canvas0.save();
        canvas0.beginPath();
        canvas0.arc(160,160,80,startAngle,endAngle);
        canvas0.lineWidth = 160;
        if (i%2 == 0) {
            canvas0.strokeStyle =  "#787878";
        }else{
            canvas0.strokeStyle =  "#626262";
        }
        canvas0.stroke();
        canvas0.restore();
    };
};
initPoint();
function initPoint(){ 
    //箭头指针
    canvas1.beginPath();
    canvas1.moveTo(100,24);
    canvas1.lineTo(90,62);
    canvas1.lineTo(110,62);
    canvas1.lineTo(100,24);
    canvas1.fillStyle = color[5];
    canvas1.fill();
    canvas1.closePath();
    //中间小圆
    canvas2.beginPath();
    canvas2.arc(100,100,40,0,Math.PI*2,false);
    canvas2.fillStyle = color[5];
    canvas2.fill();
    canvas2.closePath();
    //小圆文字
    canvas3.font = "Bold 20px Microsoft YaHei"; 
    canvas3.textAlign='start';
    canvas3.textBaseline='middle';
    canvas3.fillStyle = color[4];
    canvas3.beginPath();
    canvas3.fillText('开始',80,90,40);
    canvas3.fillText('抽奖',80,110,40);
    canvas3.fill();
    canvas3.closePath();
    //中间圆圈
    canvas2.beginPath();
    canvas2.arc(75,75,75,0,Math.PI*2,false);
    canvas2.fillStyle = color[2];
    canvas2.fill();
    canvas2.closePath();
}
</script>
</body>
</html>